<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题消消乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-image: url('background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2); /* 20%白色遮罩 = 80%背景可见 */
            z-index: -1;
        }

        h1 {
            color: #FF6B6B;
            font-size: 3.5rem;
            text-align: center;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 90%;
            max-width: 1000px;
            margin-bottom: 20px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #f35959;
        }

        .bubble-container {
            display: flex;
            flex-direction: column; /* 改为垂直排列 */
            align-items: center;
            width: 90%;
            max-width: 1000px;
            /*margin: 0 auto;*/
            margin-top: 80px;
        }

        .bubble-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            width: 100%;
            margin-bottom: 15px;
        }

        .bubble {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            text-align: center;
            padding: 15px;
            user-select: none;
            transition: transform 0.3s, opacity 0.5s;

            /* 3D立体效果 */
            box-shadow:
                    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
                    inset 0 8px 10px rgba(255, 255, 255, 0.5),
                    0 0 10px rgba(0, 0, 0, 0.1);
        }

        .bubble:hover {
            transform: scale(1.25);
        }

        .bubble.selected {
            transform: scale(1.1);
            box-shadow:
                    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
                    inset 0 8px 10px rgba(255, 255, 255, 0.8),
                    0 0 15px rgba(255, 255, 255, 0.7);
        }

        .bubble.matched {
            opacity: 0;
            pointer-events: none;
        }

        .completion-message {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            text-align: center;
        }

        .message-content {
            background-color: #FF6B6B;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            max-width: 80%;
        }

        .message-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .message-content p {
            font-size: 1.5rem;
            margin-bottom: 30px;
        }

        button {
            background-color: white;
            color: #FF6B6B;
            border: none;
            padding: 12px 25px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        button:hover {
            background-color: #FFE8E8;
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .bubble {
                width: 70px;
                height: 70px;
                font-size: 14px;
            }

            h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
<h1>知识消消乐</h1>

<div class="game-info">
    <div>已匹配: <span id="matched-count">0</span>/<span id="total-count">5</span></div>
    <div>用时: <span id="timer">0</span>秒</div>
</div>

<div class="bubble-container" id="bubble-container">
    <!-- 泡泡将通过JavaScript动态生成 -->
</div>

<div>
    <button id="restart" style="margin-top: 30px">重新开始</button>
</div>

<div class="completion-message" id="completion-message">
    <div class="message-content">
        <h2>恭喜你挑战成功!</h2>
        <p>完成时间: <span id="completion-time">0</span>秒</p >
        <button id="cancel">关   闭</button>
        <button id="restart-button" style="margin-left: 10px">再玩一次</button>
    </div>
</div>

<script>    document.addEventListener('DOMContentLoaded', function() {
    // 知识点数据 - 中文词与中文词配对
    const knowledgePairs = [
        { chinese: "赋敛愈重", english: "轻徭薄赋" },
        { chinese: "奴婢数量增加", english: "释放奴婢" },
        { chinese: "鲜卑等数连兵入塞杀略吏民", english: "允许北方各族内迁" },
        { chinese: "基层官吏冗余", english: "合并郡县裁减官员整顿吏治" },
        { chinese: "刑法弥深", english: "减轻刑罚" }
    ];

    // 游戏状态变量
    let selectedBubbles = [];
    let matchedPairs = 0;
    let totalPairs = knowledgePairs.length;
    let startTime = null;
    let timerInterval = null;

    // 获取DOM元素
    const bubbleContainer = document.getElementById('bubble-container');
    const matchedCountElement = document.getElementById('matched-count');
    const totalCountElement = document.getElementById('total-count');
    const timerElement = document.getElementById('timer');
    const completionMessage = document.getElementById('completion-message');
    const completionTimeElement = document.getElementById('completion-time');
    const restartButton = document.getElementById('restart-button');
    const restartButton1 = document.getElementById('restart');
    const cancelButton = document.getElementById('cancel');

    // 设置总对数
    totalCountElement.textContent = totalPairs;

    // 生成随机颜色
    function getRandomColor() {
        const colors = [
            '#FF6B6B', '#4ECDC4', '#FFD166', '#06D6A0',
            '#118AB2', '#073B4C', '#EF476F', '#7209B7',
            '#3A86FF', '#FB5607', '#8338EC', '#FF006E'
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    // 创建泡泡音效
    function createBubbleSound() {
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        oscillator.type = 'sine';
        oscillator.frequency.value = 523.25; // C5音符

        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.5);
    }

    // 初始化游戏
    function initGame() {
        // 清空容器
        bubbleContainer.innerHTML = '';
        selectedBubbles = [];
        matchedPairs = 0;
        matchedCountElement.textContent = matchedPairs;

        // 停止之前的计时器
        if (timerInterval) {
            clearInterval(timerInterval);
        }

        // 开始计时
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);

        // 创建两行容器
        const chineseRow = document.createElement('div');
        chineseRow.className = 'bubble-row';

        const englishRow = document.createElement('div');
        englishRow.className = 'bubble-row';

        bubbleContainer.appendChild(chineseRow);
        bubbleContainer.appendChild(englishRow);

        // 分别收集中文和英文知识点
        const chineseItems = [];
        const englishItems = [];

        knowledgePairs.forEach(pair => {
            chineseItems.push({ text: pair.chinese, pairId: pair.chinese + pair.english, type: 'chinese' });
            englishItems.push({ text: pair.english, pairId: pair.chinese + pair.english, type: 'english' });
        });

        // 随机排序两行的数据
        shuffleArray(chineseItems);
        shuffleArray(englishItems);

        // 创建所有中文泡泡
        chineseItems.forEach(item => {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            bubble.textContent = item.text;
            bubble.dataset.pairId = item.pairId;
            bubble.dataset.type = item.type;

            // 设置样式
            if (item.type === 'chinese') {
                bubble.style.color = 'white';
                bubble.style.backgroundColor = '#d8bc9c';
            }

            // 添加点击事件
            bubble.addEventListener('click', handleBubbleClick);

            chineseRow.appendChild(bubble);
        });

        // 创建所有英文泡泡
        englishItems.forEach(item => {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            bubble.textContent = item.text;
            bubble.dataset.pairId = item.pairId;
            bubble.dataset.type = item.type;

            // 设置样式
            if (item.type === 'english') {
                bubble.style.color = '#6b6666';
                bubble.style.backgroundColor = '#f35959';
            }

            // 添加点击事件
            bubble.addEventListener('click', handleBubbleClick);

            englishRow.appendChild(bubble);
        });
    }

    // 数组随机排序
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // 处理泡泡点击
    function handleBubbleClick(event) {
        const bubble = event.currentTarget;

        // 如果泡泡已经匹配或已选中，则忽略点击
        if (bubble.classList.contains('matched') || bubble.classList.contains('selected')) {
            return;
        }

        // 播放泡泡音效
        createBubbleSound();

        // 添加选中样式
        bubble.classList.add('selected');

        // 添加到已选泡泡列表
        selectedBubbles.push(bubble);

        // 如果选中了两个泡泡
        if (selectedBubbles.length === 2) {
            const bubble1 = selectedBubbles[0];
            const bubble2 = selectedBubbles[1];

            // 检查是否匹配
            if (bubble1.dataset.pairId === bubble2.dataset.pairId) {
                // 匹配成功
                setTimeout(() => {
                    bubble1.classList.add('matched');
                    bubble2.classList.add('matched');
                    selectedBubbles = [];

                    matchedPairs++;
                    matchedCountElement.textContent = matchedPairs;

                    // 检查游戏是否完成
                    if (matchedPairs === totalPairs) {
                        endGame();
                    }
                }, 200);
            } else {
                // 不匹配
                setTimeout(() => {
                    bubble1.classList.remove('selected');
                    bubble2.classList.remove('selected');
                    selectedBubbles = [];
                }, 500);
            }
        }
    }

    // 更新计时器
    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = Math.floor((currentTime - startTime) / 1000);
        timerElement.textContent = elapsedTime;
    }

    // 结束游戏
    function endGame() {
        clearInterval(timerInterval);
        const currentTime = new Date();
        const elapsedTime = Math.floor((currentTime - startTime) / 1000);

        completionTimeElement.textContent = elapsedTime;
        completionMessage.style.display = 'flex';
    }

    // 重新开始游戏
    restartButton.addEventListener('click', function() {
        completionMessage.style.display = 'none';
        initGame();
    });
    restartButton1.addEventListener('click', function() {
        location.reload();
    });
    cancelButton.addEventListener('click', function() {
        completionMessage.style.display = 'none';
    });

    // 初始化游戏
    initGame();
});
</script>
</body>
</html>
